<template>
  <div id="scrollProductItem">
    <div class="contain-item">
      
      <!-- 左侧菜单 -->
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item v-for="item in food_list" :key="item.id" :title="item.name" />
      </van-sidebar>

      <!-- 右侧列表 -->
      <div class="food-items">
          <div class="item" v-for="item in food_list" :key="item.id">
            <h3 class="fd-title">{{item.name}}<span>{{item.description}}</span> <a href="#">...</a> </h3>
            <!-- 右侧列表内容 -->
            <div class="children" v-for="itemChild in item.foods" :key="itemChild.id">
              <div v-for="(its,index) in itemChild.attributes"  :key="index" v-if="its.icon_name == '新'">
                <div class="tab-left"></div>
                <span class="tab-left-title">新品</span>
              </div>
              <div class="children-item">
                  <van-image width="50" height="50" :src="pre + itemChild.image_path" />
                <div class="right">
                  <div class="right-title">
                    <h4>{{itemChild.name}}</h4> 
                    <div><van-tag v-for="(its,index) in itemChild.attributes" :style="{marginLeft: '10px'}" :key="index" :color="'#'+its.icon_color" plain>{{its.icon_name}}</van-tag></div>
                  </div>
                  <p :style="{color: '#bcbcbc'}">{{itemChild.description}}</p>
                  <div class="counts"><span>月销售 {{itemChild.month_sales}} 份</span> <span>好评率 {{itemChild.satisfy_rate}} %</span></div>
                  <div><van-tag v-if="itemChild.activity" :color="'#'+itemChild.activity.image_text_color" plain>{{itemChild.activity.image_text}}</van-tag></div>
                  <div class="price-add">
                      <div>&yen; <span>{{itemChild.specfoods[0].price}}</span> <i>起</i></div>
                  </div>
                </div>
              </div>

            </div>
          </div>
      </div>

    </div>

    <!-- 购物车 -->
    <div class="shopping-car">
      <!-- 购物车图标 -->
     <div class="icon-car">
       <van-icon name="shopping-cart" color="#ffffff" size="35" />
       <span class="pr-num">5</span>
     </div>

     <van-button type="primary">去结算</van-button>

    </div>
  </div>
</template>

<script>
import {FoodList} from "@/request/api"

export default {
  data() {
    return {
      pre: "http://kumanxuan1.f3322.net:8001/img/",
      active: 0,
      activeKey: 0,
      food_list: [],
    };
  },
  
  props: {
    shopId: {
      type: String,
      default: null
    }
  },
  
  mounted(){
        // 获取食品列表
    FoodList(this.shopId).then((res) => {
      if(res.status == 200){
        this.food_list = res.data;
        console.log(this.food_list);
      }
    });
  },
  methods: {
    onChange(index){
      console.log(index);
    }
  }
};
</script>

<style lang="less">

#scrollProductItem{
  box-sizing: border-box;

  .tar-bar{
    position: fixed;
    top: 0;
    left: 0;
  }
}

.shopping-car {
  z-index: 10;
  width: 100%;
  height: 90px;
  position: fixed;
  bottom: 0;
  background-color: #3d3d3f;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  // 购物车图标
  .icon-car{
    width: 100px;
    height: 100px;
    background-color: #3792e5;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 30px;
    top: -50px;
    border-radius: 50%;
    border: 10px solid #3d3d3f;

    // 红色
    .pr-num{
      color: #fff;
      background-color: red;
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      right: 0px;
      top: -10px;
    }
  }

  .van-button{
    height: 90px;
    width: 200px;
    .van-button__text{
      font-size: 30px;
    }
  }

}

.contain-item{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;

.van-sidebar-item__text{
  position: static;
  font-size: 30px;
}

  .van-info{
    height: 30px;
    width: 30px;  
    line-height: 30px;
    top: 30px;
    right: 30px;
  }


  .food-items{
    box-sizing: border-box;
    overflow-y: auto;
    height: 1164px;
    flex: 1;
  }

  h3.fd-title{
    font-size: 38px;
    color: #666;
    height: 90px;
    line-height: 90px;
    padding-left: 20px;

    span{
      font-size: 22px;
      color: #9e9e9e;
      display: inline-block;
      margin-left: 20px;
      position: relative;
      top: -5px;
    }

    a{
      float: right;
      margin-right: 20px;
      position: relative;
      top: -7px;
      color: #d3d3d3;
    }

  }
  // 
  .children{
    padding: 20px;
    padding-top: 0px;
    padding-left: 0px;
    background: #fff;
    position: relative;
    height: 300px;
    width: 100%;
    margin-top: 30px;

    .tab-left{
      border: 60px solid;
      border-color:  transparent #53d769 transparent transparent;
      position: absolute;
      left: -60px;
      top: -60px;
      color: #fff;
      transform: rotate(45deg);
      z-index: 1;
    }

    span.tab-left-title{
      position: absolute;
      z-index: 1;
      top: 10px;
      left: 0;
      color: #fff;
        transform: rotate(-45deg);
    }

    .children-item{
      position: absolute;
      top: 0;
      width: 100%;
      left: 0;
      height: 1200px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      box-sizing: border-box;
      padding: 20px 20px 0 20px;
    }
  }

  .children:nth-of-type(1){
    margin-top: 0;
  }

}

.van-sidebar-item, .van-sidebar{
  width:230px;
}

.van-sidebar-item{
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.van-sidebar-item--select{
  background-color: #fff;
}

.van-sidebar-item--select::before{
  height: 100%;
  background-color: #258cf7;
  width: 8px;
}
.right{
  flex: 1;
  padding-right: 20px;
  padding-left: 20px;

  .right-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 36px;
    margin-top: 10px;



  }

      p, div{
      margin-top: 10px;
    }

  .counts{
    font-size: 14px;
    color: #333333;
    margin-top: 10px;
  }
}


.price-add{
  font-size: 26px;
  
  div:nth-child(1){
    color: #fc6922;
  }

  display: flex;
  flex-direction: row;
  justify-content: space-between;

  span{
    font-size: 32px;
  }
  i{
    font-style: normal;
  }
}

</style>